<template>
  <el-drawer
    :visible.sync="drawerVisible"
    :before-close="handleClose"
    :with-header="false"
    :wrapper-closable="true"
    :size="showMobilePage?'100%':'60%'">
    <div v-loading="loading" class="settle-log">
      <div class="title">
        <Title title="结算单生成记录"/>
        <i class="el-icon-close icon" @click="handleClose"/>
      </div>
      <filter-input
        v-model="paramsObj"
        :filter-list="filterList"
        show-search-btn
        line-feed
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus"
      />
      <div class="table-list">
        <el-table
          v-if="listData.items.length > 0"
          :data="listData.items"
          :height="setTableHeight"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <el-table-column label="结算名称" width="180" >
            <template slot-scope="scope">
              <ToolTip :content="scope.row.settleName" :is-can-click="!scope.row.isDelete" @handelClick="goDetail(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="结算金额(元)" align="right" width="120" >
            <template slot-scope="scope">
              <PriceColumn :real-val="scope.row.settleAmount" :price="scope.row.settleAmount" />
            </template>
          </el-table-column>
          <el-table-column label="账号" width="120" >
            <template slot-scope="scope">
              <ToolTip :content="scope.row.account" />
            </template>
          </el-table-column>
          <el-table-column label="生成时间" width="150">
            <template slot-scope="scope">
              {{ scope.row.createTime | format('YYYY/MM/DD HH:mm') }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom-tool">
        <el-pagination
          v-show="listData.total > 0"
          :current-page="listData.page"
          :page-size="listData.perPage"
          :total="listData.total"
          :page-sizes="[10, 20, 50, 100, 250, 500]"
          :layout="showMobilePage ? 'total, prev, next, jumper' : 'total, prev, pager, next, sizes, jumper'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-drawer>
</template>
<script>
import Title from '@/components/Title';
import { getSmartSettleLog } from '@/api/settle.js';
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import { encryption } from '@/utils';
import TableAdaptive from '@/mixins/tableAdaptive';

export default {
  components: { Title },
  filters: { format },
  mixins: [TableAdaptive],
  data() {
    return {
      drawerVisible: false,
      paramsObj: {},
      page: 1,
      perPage: 10,
      loading: false,
      listData: {
        items: [],
        total: 0,
        page: 1,
        perPage: 10
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tableOutsideHeight() {
      return 150;
    },
    filterList() {
      return [
        { keyword: 'account', name: '账号', type: 'input' },
        { keyword: 'settleName', name: '结算名称', type: 'input' }
      ];
    }
  },
  methods: {
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.paramsObj;
      params.page = this.page;
      params.perPage = this.perPage;
      this.loading = true;
      getSmartSettleLog(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.listData = res.data;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
    },
    handleClose() {
      this.drawerVisible = false;
    },
    openDrawer() {
      this.fetchData(true);
      this.drawerVisible = true;
    },
    goDetail(item) {
      const query = {
        settleId: item.id,
        id: item.supplierId,
        isSettle: true
      };
      if (item.isNotOrder) query.isNotOrder = 1;
      if (item.isInvite) {
        query.isInvite = encryption(item.id);
      }

      const routeUrl = this.$router.resolve({
        name: 'supplierDetail',
        query
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style scoped lang="scss">
.settle-log {
  padding: 22px 24px 0;
  @include scrollBar($y: auto, $width: 6px);
  position: relative;
  .title {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
  }
  .table-list {
    margin-top: 16px;
  }
  .bottom-tool {
    bottom: 0;
    width: 100%;
    z-index: 10;
    background-color: #fff;
  }
  .icon {
    font-size: 18px;
    cursor: pointer;
  }
}
</style>
